<template>
  <div class="bg">
    <div
      class="bg-bottom"
      :style="{ backgroundImage: 'url(' + song.picUrl + ')' }"
    ></div>
    <h1 class="title">{{ song.name }}</h1>
    <p class="artist">歌手： {{ song.artist }}</p>
    <img
      @mouseenter="show"
      @mouseleave="hidden"
      class="img"
      :src="song.picUrl"
      width="186"
    />
    <span v-show="isShow" class="toogle" @click="play"></span>
    <!-- v-for循环对象，val就是对象的属性值 -->
    <!-- <p v-for="val in obj1" :key="val">{{val}}</p> -->
    <div class="lyric-div">
      <p v-for="val in lyric" :key="val">{{ val }}</p>
    </div>
    <!-- 播放视频的标签：video -->
    <!-- 播放音频的标签 -->
    <!-- controls：显示播放器的控件 -->
    <audio id="audio" ref="audio" :src="songUrl"></audio>
  </div>
</template>

<script>
const axios = require("axios");
// import playImg from '../assets/play.jpeg'
// import pauseImg from '../assets/pause.jpeg'
export default {
  data() {
    return {
      song: {},
      // 歌词
      lyric: {},
      obj1: {
        age: 18,
        name: "Tom",
        job: "student",
      },
      // 歌曲的播放地址
      songUrl: "",
      auto: false,
      isShow: false,
      playImg: '../assets/play.jpeg'
    };
  },
  // 生命周期钩子函数
  created() {
    this.getDetail();
    this.getLyric();
    this.getSongUrl();
  },
  mounted() {},
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    play() {
      // 判断是否暂停
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    },
    // 获取歌曲的播放地址
    getSongUrl() {
      axios
        .get("http://localhost:3000/song/url?id=" + this.$route.params.id)
        .then((res) => {
          this.songUrl = res.data.data[0].url;
          // 获取地址后自动播放

          //   this.$refs.audio.play()
          //   console.log(this.$ref.audio);
        });
    },
    // 歌曲详情
    getDetail() {
      axios
        .get("http://localhost:3000/song/detail?ids=" + this.$route.params.id)
        .then((res) => {
          this.song.name = res.data.songs[0].name;
          this.song.artist = res.data.songs[0].ar[0].name;
          this.song.picUrl = res.data.songs[0].al.picUrl;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 歌词
    getLyric() {
      axios
        .get("http://localhost:3000/lyric?id=" + this.$route.params.id)
        .then((res) => {
          this.lyric = this.transLrc(res.data.lrc.lyric);
        });
    },
    // 格式化歌词-lrc是原始歌词，这个函数会返回格式化处理之后的歌词
    transLrc(lrc) {
      let obj = {};
      //  正则表达式
      let reg = /\[(.*)](.*)/g;
      lrc.replace(reg, (a, b, c) => {
        // a是匹配到的内容 a=b+c a是完整的一个片段，b是时间，c是歌词
        // b是时间，精确到秒；是第一个子表达式的内容
        b = b.slice(0, 5);
        // c是歌词的内容；是第二个子表达式的内容
        obj[b] = c;
      });
      return obj;
    },
  },
};
</script>

<style>
.bg-bottom {
  /* vh:viewprot height 视图高度的百分比 */
  width: 100vw;
  height: 100vh;
  background-color: white;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(60px);
  opacity: 0.6;
  transform: translateZ(0);
  z-index: -1;
}
.title {
  text-align: center;
}
.artist {
  float: right;
  margin-right: 100px;
}
.img {
  margin-left: 50%;
  position: relative;
  left: -98px;
  top: 20px;
  z-index: 99;
}
/* 鼠标移入图片，显示暂停或者播放的按钮 */
.img:hover .toogle {
  display: inline-block;
}
.toogle {
  display: inline-block;
  width: 186px;
  height: 184px;
  margin-left: 50%;
  position: absolute;
  z-index: 9999;
  top: 82px;
  left: -98px;
  opacity: 0.4;
  background-color: rgba(250, 250, 250, 0.5);
  background-image: url('../assets/play.png');
  background-size: cover;
}
.lyric-div {
  width: 600px;
  height: 400px;
  margin-left: 50%;
  position: relative;
  left: -300px;
  top: 40px;
  text-align: center;
  overflow: scroll;
  cursor: grab;
}
.lyric-div p {
  height: 28px;
  line-height: 28px;
}
#audio {
  position: absolute;
  top: 100px;
  right: 20px;
}
</style>